<!-- 
    @file: 登录页
    @auth: lizibin
 -->
<template>
    <div class="loginBox">
        <!-- 先不要logo -->
        <!-- <a class="login_logo"></a> -->
        <div class="midgroup">
            <div class="loginwrap loginwarrp">
                <div class="logingroup login_form">
                    <h2 style="text-align: center; color: #2fa7b9;">登 录</h2>
                    <el-form ref="ruleFormRef" :model="state.ruleForm" status-icon :rules="rules" label-width="120px"
                        style="padding-top:20px;" label-position="top" size="large" class="demo-ruleForm">
                        <!-- @submit.native.prevent-->
                        <el-form-item prop="loginName">
                            <el-input :prefix-icon="User" v-model="state.ruleForm.loginName" placeholder="请输入用户名或者电子邮箱" />
                        </el-form-item>
                        <el-form-item prop="loginPass">
                            <el-input :prefix-icon="Lock" v-model="state.ruleForm.loginPass" show-password
                                autocomplete="off" placeholder="请输入密码" />
                        </el-form-item>
                        <!-- 验证码 -->

                        <el-form-item v-if="state.mode !== 'development'" prop="inputVerificationCode">
                            <el-input :prefix-icon="Right" v-model="state.ruleForm.inputVerificationCode"
                                placeholder="请输入验证码">
                                <template #append>
                                    <VerificationCode ref="player" @getVerificationCode="getVerificationCode"
                                        title="看不清？点击换一张">
                                    </VerificationCode>
                                </template>
                            </el-input>
                        </el-form-item>

                        <el-form-item prop="loginBtn" class="loginBtn">
                            <el-button color="#2fa7b9" plain style="width:100%;" @click="submitLoginInfo(ruleFormRef)">立即登录
                            </el-button>
                        </el-form-item>
                        <p class="toPath">
                            还没有账号，<span style="color:#2fa7b9;" @click="toPath('/register')">立即注册</span>
                            <span style="float:right;color:#999;" @click="toPath('/resetPassword')">忘记密码？</span>
                        </p>
                    </el-form>

                    <footer style="text-align:center;">
                        <p>若没有坚持到底的勇气,还是不要开始好了.</p>
                    </footer>
                </div>
            </div>
        </div>
        <div class="footer_copyright">
            <p>
                · Designed by 小李. All Rights Reserved. Copyright © 2022 小李 ·
            </p>
        </div>
    </div>
</template>
<script setup lang="ts">
// 验证码组件
import VerificationCode from './verification-code/verificationCode.vue'
import { reactive, ref } from 'vue'
import { User, Lock, Right } from '@element-plus/icons-vue'
import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
import { useRoute, useRouter } from 'vue-router';
import type { FormInstance } from 'element-plus'
import { Login, InsertLoginInfo } from "@/api/foreground";
import Cookies from 'js-cookie'
import { useStore } from '@/store/index'
import { storeToRefs } from 'pinia'
const Store = useStore()
const { LoginInfo } = storeToRefs(Store)
const { code: LoginCode, data: LoginData } = LoginInfo.value;

const ruleFormRef = ref<FormInstance>()

// 前往某个界面
const toPath = (path: string) => {
    router.push({
        path
    }); //正常登录流程进入的页面
}
const router = useRouter();
const route = useRoute();

// 响应式内容
const state = reactive({
    ruleForm: {
        loginName: '',
        loginPass: '',
        // 随机生成的验证码
        verificationCode: '',
        // 输入的验证码
        inputVerificationCode: ''
    },
    mode: import.meta.env.MODE,
    //获取当前访问的协议/:IP/端口
    // registerUrl: location.protocol + '//' + location.host + '/' + 'register.html'
});

// 用户名的非空验证
const validateName = (rule: any, value: any, callback: any) => {
    if (!value) {
        return callback(new Error('请填写此字段~'))
    } else {
        callback()
    }
};
// 密码的非空验证
const validatePass = (rule: unknown, value: string | undefined, callback: (msg?: string) => void) => {
    if (!value) {
        return callback('请填写此字段~')
    } else {
        callback()
    }
};
// 验证码的非空、输入正确验证
const validateVerificationCode = (rule: unknown, value: string | undefined, callback: (msg?: string) => void) => {
    if (!value) {
        return callback('请填写此字段~')
    } else {
        if (value.toLowerCase() == state.ruleForm.verificationCode.toLowerCase()) {
            callback()
        } else {
            return callback('嘿，验证码输入有误哟~')
        }
    }
};

// 接收子组件（验证码）传的值
const getVerificationCode = (codeList: string) => {
    state.ruleForm.verificationCode = codeList;
};


// 约束规则 正则
const rules = reactive({
    loginName: [{
        validator: validateName,
        trigger: 'blur'
    }],
    loginPass: [{
        validator: validatePass,
        trigger: 'blur'
    }],
    inputVerificationCode: [{
        validator: validateVerificationCode,
        trigger: 'blur'
    }]
});

// 登录逻辑
const continueLogin = async () => {
    // 验证用户名、密码是否正确,数据库中是否存在
    let data = {
        loginName: state.ruleForm.loginName,
        loginPass: state.ruleForm.loginPass,
    };
    // 登录
    await Store.getLoginInfo(data)
    const LoginState = Cookies.get('LoginState')
    if (LoginState === 'yes') {
        // 添加登录信息
        let params = {
            loginId: Number(Cookies.get('LoginId'))
        }
        InsertLoginInfo(params)

        // 调用子组件方法（下一个验证码）refreshCode
        // unref(player).refreshCode();
        // 重置表单项，将其值重置为初始值，并移除校验结果
        // ruleFormRef.resetFields()
        // 加载动画
        const loading = ElLoading.service({
            lock: true,
            text: '登录中',
            background: 'rgba(0, 0, 0, 0.7)',
        })
        setTimeout(() => {
            // 判断是不是从别的页面跳转过来的
            if (route.query.redirect) {
                router.push({
                    path: '/articleDetails',
                    query: {
                        id: route.query.redirect
                    }
                })
                loading.close()

            } else {
                //正常登录流程进入的页面
                toPath('/backstageHome')
                loading.close()

            }
        }, 500)
    } else {
        ElMessage({
            showClose: true,
            message: '登录失败，用户名或密码有误！',
            type: 'error',
        })
    }
}
// 立即登录按钮
const submitLoginInfo = (formEl: FormInstance | undefined) => {
    // 1：校验登录信息  validate
    if (!formEl) return
    formEl.validate((valid) => {
        // 如果表单校验成功 提交数据到后台
        if (valid) {
            // 判断用户是否已经登录
            const LoginState = Cookies.get('LoginState')
            if (LoginState !== 'yes') {
                // 登录验证
                continueLogin();
            } else { // 用户已经登录账号
                ElMessageBox.confirm(
                    '糟糕！系统检测到您已登录，请选择继续登录or前往后台',
                    '登录提示', {
                    confirmButtonText: '继续登录',
                    cancelButtonText: '前往后台',
                    type: 'warning',
                    center: true,
                }
                ).then(() => {
                    // 继续登录
                    continueLogin();
                }).catch(() => {
                    //前往后台
                    toPath('/backstageHome')
                })
            }
        }
    })
}
</script>

<style scoped>
.loginBox {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: #fff url(../../assets/login/login-bg.png) no-repeat;
    background-size: cover;
}

.login_logo {
    display: block;
    position: absolute;
    left: 8vw;
    top: 20px;
    width: 160px;
    height: 50px;
    background: url(../../assets/logo.svg) no-repeat center;
    background-size: 160px;
}

.loginBox .midgroup {
    width: 420px;
    margin: 20vh auto;
    position: relative;
}

.loginBox .midgroup .logingroup {
    padding: 20px 40px;
    background: white;
    overflow: hidden;
    box-shadow: 0 1px 10px 0 rgb(7 17 27 / 10%);
    padding-top: 20px;
    border-radius: 10px;
}

.loginBox .midgroup .logingroup footer {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dotted #ddd;
    color: #999;
    font-size: 12px;
    overflow: hidden;
}

.footer_copyright {
    width: 100%;
    text-align: center;
    line-height: 24px;
    color: #999;
    font-size: 12px;
    position: fixed;
    left: 0;
    bottom: 0;
    overflow: hidden;
    padding: 10px;
    border-top: 1px solid #eee;
    background: white;
}

:global(.el-input-group__append) {
    padding: 0px;
    background: #f6f6f6;
}

.loginBtn :deep(.el-form-item__error) {
    text-align: center;
    width: 100%;
}

.toPath {
    font-size: 12px;
    color: #999;
}

.toPath span {
    cursor: pointer;
}

.toPath span:hover {
    color: #2fa7b9;
}
</style>